{% extends "ui/base-devices.html" %}
{% load icons %}
{% load url from future %}

{% block content %}
<table class="table table-striped table-bordered details-components">
    <thead><tr>
        <th width="16"></th>
        <th>Label</th>
        <th>Model</th>
        <th>Serial Number</th>
        <th>Speed</th>
        <th>Size</th>
        <th>Count</th>
        {% if user.is_staff %}
        <th>Action</th>
        {% endif %}
    </tr></thead>
    <tbody>
        {% for item in components %}
        {% if not item.model.is_software %}
        <tr>
            <td><i class="fugue-icon {{ item.icon }}"></i></td>
            {%  if item.hrefinfo %}
                <td><a href="{{ item.hrefinfo }}" style="white-space:nowrap">
                        {{ item.label }}
                     </a>
                </td>
            {%  else %}
                <td>{{ item.label }}</td>
            {%  endif %}
            <td>
                {% if item.group == 'dev' %}
                    <a href="{% url 'search' %}?model={{ item.model.name }}">
                        {{ item.model.name }}
                    </a>
                {% else %}
                    {{ item.model }}
                {% endif %}
            </td>
            <td>{{ item.serial|default:'' }}</td>
            <td>{{ item.speed|default:'' }}</td>
            <td>{{ item.size|default:'' }}</td>
            <td>{{ item.count|default:'' }}</td>
            {% if user.is_staff %}
            <td>
                {% if item.href %}
                <a href="{{ item.href }}" style="white-space:nowrap">
                    {% icon 'fugue-toolbox--pencil' %} Edit
                </a>
                {% endif %}
            </td>
            {% endif %}
        </tr>
        {% endif %}
        {% endfor %}
    </tbody>
</table>

{% endblock content %}
